<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>布局</title>

</head>
<body>
<!--
    传统的布局手段
        1. 盒子模型（box model）
            - 盒子模型主要用来确定元素的大小和间距的
            - 主要用来处理元素的纵向排列

        2. 浮动（float）
            - 浮动本来是用来处理文本环绕图片这种类似效果的
                后来被用到了元素的水平排列上
            - 因为它不是被设计用来布局的，所以使用浮动时会存在一些问题（高度塌陷问题）
            - 主要用来处理元素的横向排列

            - 注意：
                盒子模型和浮动主要用来进行宏观的布局

        3. 定位（position）
            - 通过定位可以将一个元素摆放到网页的任意位置
            - 主要用来处理网页中的小东西

-->
</body>
</html>